<template>
  <div>
    <header class="home-header fixed top-0 w-full">
      <nav class="flex justify-between h-[64px] items-center">
        <div class="logo ml-10 pl-4">LOGO</div>
        <div class="flex h-full items-center">
          <div class="header-search mr-4 flex items-center">
            <Icon name="search" class="mr-4 ml-4" />
            <span class="text-lg">搜索</span>
          </div>
          <div class="navigator flex">
            <div v-for="item in linkList" :key="item.path" class="mr-5">
              <NuxtLink
                active-class="active-link"
                class="text-white"
                :to="`/${item.path}`"
                >{{ item.title }}</NuxtLink
              >
            </div>
          </div>
        </div>
        <div class="get-start mr-10 flex h-full items-center">
          <Icon name="global" class="mr-4" />
          <span> 登录/开始 </span>
        </div>
      </nav>
    </header>
    <div class="pt-[64px]">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
const linkList = ref([
  {
    title: "首页",
    path: "",
  },
  {
    title: "功能",
    path: "features",
  },
  {
    title: "价格",
    path: "pricing",
  },
  {
    title: "FAQ",
    path: "faq",
  },
  {
    title: "联系我们",
    path: "contact",
  },
]);
</script>

<style lang="scss">
.navigator {
  display: none;
}
@media (min-width: 1440px) {
  .navigator {
    display: flex;
  }
}
@media (min-width: 1280px) {
  .navigator {
    display: flex;
  }
}
.header-search {
  background-color: #2e2e2e;
  color: #b8b8b8;
  border-radius: 20px;
  width: 200px;
  height: 40px;
}
.active-link {
  color: $primary;
}
</style>
